<template>
  <ContentWrap>
    <el-row :gutter="15">
      <el-col :span="12">
        <el-card>
          <div class="item">
            <el-text class="font-700" size="large">套系审核设置</el-text>
          </div>
          <el-space class="item middle_item">
            <el-text class="!mr-7px">套系审核设置</el-text>
            <el-switch
              v-model="formData.packageAudit"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
              size="small"
              :active-value="0"
              :inactive-value="1"
              @change="changeStatus"
            />
          </el-space>
          <div>
            <el-text type="info">开启的套系审核通过后方可使用，未审核的不允许使用</el-text>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="item">
            <el-text class="font-700" size="large">产品审核设置</el-text>
          </div>
          <el-space class="item middle_item">
            <el-text class="!mr-7px">产品审核设置</el-text>
            <el-switch
              v-model="formData.productAudit"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
              size="small"
              :active-value="0"
              :inactive-value="1"
              @change="changeStatus"
            />
          </el-space>
          <div>
            <el-text type="info">开启的产品审核通过后方可使用，未审核的不允许使用</el-text>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </ContentWrap>
</template>

<script setup lang="ts">
import {
  OrderPackageConfigApi,
  OrderPackageConfigVO
} from '@/api/studio/orderPackageConfig/baseConfig'

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
/** 套系 列表 */
defineOptions({ name: 'OrderPackageConfig' })

// 表单定义
const formData = ref({
  id: undefined,
  packageAudit: 1,
  productAudit: 1
})

const changeStatus = async () => {
  const data = formData.value as unknown as OrderPackageConfigVO
  await OrderPackageConfigApi.updateOrderPackageConfig(data)
  // 发送操作成功的事件
  message.success(t('common.updateSuccess'))
}

// 初始化数据
onMounted(async () => {
  formData.value = await OrderPackageConfigApi.getOrderPackageConfigExist()
})
</script>

<style scoped lang="scss">
.item {
  margin-bottom: 7px;
}

.middle_item {
  height: 30px;
}
</style>
